<template>
  <div class="worker">
    <!-- 头部搜索 -->
    <div class="search">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <el-input
              v-model="keyword"
              placeholder="输入你想搜索的员工名称"
              clearable
            ></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="adddialogVisible = true"
              >添加员工</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table :data="filterWorkerInfos" style="width: 100%" border stripe>
      <el-table-column
        align="center"
        type="index"
        label="#"
        width="40"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="workerID"
        label="工号"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="workerName"
        label="师傅姓名"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="workerPhone"
        label="师傅电话"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="当前状态"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="isDelete"
        label="在岗信息"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="入职时间"
      ></el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template v-slot="scope">
          <!-- 查看详情-->
          <el-tooltip
            class="item"
            effect="dark"
            content="删除师傅"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteWorker(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加员工对话框 -->
    <el-dialog title="添加维修师傅" :visible.sync="adddialogVisible">
      <el-form :model="addWorkerForm">
        <el-form-item label="师傅姓名" :label-width="formLabelWidth">
          <el-input v-model="addWorkerForm.workerName"></el-input>
        </el-form-item>
        <el-form-item label="师傅电话" :label-width="formLabelWidth">
          <el-input v-model="addWorkerForm.workerPhone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendWorkerInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Worker",
  data() {
    return {
      workerInfos: [],
      filterWorkerInfos: [],
      keyword: "",
      adddialogVisible: false,
      addWorkerForm: {
        workerName: "",
        workerPhone: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getWorkerInfos();
  },
  methods: {
    getWorkerInfos() {
      this.axios.get("/api/api_1_0/workerInfo/getAllWorker").then(
        (response) => {
          if (response.data.code == "2000") {
            this.workerInfos = response.data.data;
            this.filterWorkerInfos = response.data.data;
            for (let i = 0; i < this.workerInfos.length; i++) {
              if (this.workerInfos[i].status === 0) {
                this.workerInfos[i].status = "空闲";
              } else {
                this.workerInfos[i].status = "忙碌中";
              }

              if(this.workerInfos[i].isDelete === 0) {
                this.workerInfos[i].isDelete = '在岗'
              } else {
                this.workerInfos[i].isDelete = '离职'
              }
            }
          }
        },
        (err) => {}
      );
    },
    deleteWorker(row) {
        let deleteID = row.workerID
        let formData = new FormData()
        formData.append('workerID', deleteID)
        this.axios({
            method: "POST",
            url: '/api/api_1_0/workerInfo/delWorkerInfo',
            data: formData
        }).then(
            (response) => {
            if (response.data.code === "2000") {
                this.$message({
                message: "删除师傅成功",
                type: "success",
                });
            } else {
                this.$message.error("删除失败");
            }
            },
            (err) => {
            console.log("更新失败");
            }
        );
        // 刷新一下界面
        this.getWorkerInfos()
    },
    // 呈现添加员工信息对话框
    addWorker() {
      this.adddialogVisible = true;
    },
    // 发送添加信息给服务器进行保存
    sendWorkerInfo() {
      this.adddialogVisible = false;
      let formData = new FormData();
      formData.append("workerName", this.addWorkerForm.workerName);
      formData.append("workerPhone", this.addWorkerForm.workerPhone);
      this.axios({
        method: "POST",
        url: "/api/api_1_0/workerInfo/addWorkerInfo",
        data: formData,
      }).then(
        (response) => {
          if (response.data.code === "2000") {
            this.$message({
              message: "添加师傅成功",
              type: "success",
            });
          } else {
            this.$message.error("添加失败");
          }
        },
        (err) => {
          console.log("更新失败");
        }
      );
      // 刷新一下页面信息
      this.getWorkerInfos();
    },
  },
  watch: {
    keyword: {
        immediate: true,
        handler(val) {
            this.filterWorkerInfos = this.workerInfos.filter((info) => {
                return info.workerName.indexOf(val) !== -1
            })
        }
    }
  }
};
</script>

<style lang="less" scoped>
.worker {
  .search {
    margin-top: 15px;
    .el-input {
      width: 300px;
      margin: 0 30px;
    }
    .el-button {
      width: 100px;
    }
  }
  .el-table {
    margin-top: 40px;
  }
}
</style>
